import type { Directive } from 'vue'

/**
 * 自动去除输入框前后空格的指令
 * 使用方法：v-trim-input
 * 
 * 功能：
 * 1. 在输入时自动去除前后空格
 * 2. 在失去焦点时去除前后空格
 * 3. 支持 v-model 双向绑定
 * 4. 兼容 Element Plus 组件
 */

interface TrimInputElement extends HTMLElement {
  _trimInputHandler?: (event: Event) => void
  _trimBlurHandler?: (event: Event) => void
}

const trimInput: Directive = {
  mounted(el: TrimInputElement) {
    // 查找实际的输入元素
    const input = el.tagName === 'INPUT' ? el as HTMLInputElement : el.querySelector('input')
    
    if (!input) {
      console.warn('v-trim-input: 未找到 input 元素')
      return
    }

    // 创建处理函数
    const handleInput = (event: Event) => {
      const target = event.target as HTMLInputElement
      const trimmedValue = target.value.trim()
      
      // 只有当值真正改变时才更新
      if (target.value !== trimmedValue) {
        target.value = trimmedValue
        
        // 触发 input 事件以更新 v-model
        const inputEvent = new Event('input', { bubbles: true })
        target.dispatchEvent(inputEvent)
      }
    }

    const handleBlur = (event: Event) => {
      const target = event.target as HTMLInputElement
      const trimmedValue = target.value.trim()
      
      // 失去焦点时确保去除空格
      if (target.value !== trimmedValue) {
        target.value = trimmedValue
        
        // 触发必要的事件
        const inputEvent = new Event('input', { bubbles: true })
        const changeEvent = new Event('change', { bubbles: true })
        target.dispatchEvent(inputEvent)
        target.dispatchEvent(changeEvent)
      }
    }

    // 绑定事件
    input.addEventListener('input', handleInput)
    input.addEventListener('blur', handleBlur)

    // 保存处理函数引用以便清理
    el._trimInputHandler = handleInput
    el._trimBlurHandler = handleBlur
  },

  beforeUnmount(el: TrimInputElement) {
    // 查找实际的输入元素
    const input = el.tagName === 'INPUT' ? el as HTMLInputElement : el.querySelector('input')
    
    if (input && el._trimInputHandler && el._trimBlurHandler) {
      input.removeEventListener('input', el._trimInputHandler)
      input.removeEventListener('blur', el._trimBlurHandler)
    }
  }
}

export default trimInput
